<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>

	</head>

	<body class="bodyBackground">
		
		<div id="btn1" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="单击和校验" zxt.validate="true"></div>
		<div>校验方法的调用需要重写zxt.ui.button的onclick方法具体参见1.0工程</div>
		
		<div id="btn2" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="功能函数"></div>
		
		<table>
			<tr>
				<td>getType()</td>
				<td>返回按钮的控件类型</td>
				<td><input type="button" name="getType" value="getType" 
					onclick="alert('功能函数按钮的type为'+$zxtUI.btn2.getType());"/></td>
			</tr>
			<tr>
				<td>isDisplay() setDisplay(d)</td>
				<td>返回和设置按钮的显示状态 （函数内容未实现 使用mode函数代替）</td>
				<td><input type="button" name="isDisplay" value="isDisplay" 
					onclick="alert('功能函数按钮的isDisplay为'+$zxtUI.btn2.isDisplay());"/></td>
			</tr>
			<tr>
				<td>label()</td>
				<td>返回按钮的标签 为你配的zxt.label的值 目前无作用</td>
				<td><input type="button" name="label" value="label" 
					onclick="alert('功能函数按钮的label为'+$zxtUI.btn2.label());"/></td>
			</tr>
			<tr>
				<td>mode(v)</td>
				<td>按钮的显示模式</td>
				<td><input type="button" name="mode" value="mode" 
					onclick="alert('功能函数按钮的mode为'+$zxtUI.btn2.mode());"/></td>
			</tr>
			<tr>
				<td>text(v)</td>
				<td>[GETTER | SETTER] 按钮显示文字</td>
				<td><input type="button" name="text" value="text" 
					onclick="alert('功能函数按钮的text为'+$zxtUI.btn2.text());"/></td>
			</tr>
		</table>
		
		<div id="btn3" style='width:100px'></div>
		
		<div><a href="../index.html">返回</a></div>
	</body>
</html>

<script type="text/javascript"">
$zxt.init();

$zxtUI.btn2.mode("DISABLE");
$zxtUI["btn2"].render();

function validate$btn1() {
	alert("校验函数！");
	return true;
};

function onClick$btn1() {
	$zxtUI.btn1.text("我的新名字");
	$zxtUI.btn1.render();
};

var btn = new zxt.ui.Button("btn3","HTML按钮写法");
btn.onClick = function(){
	alert("HA");
}
$("#btn3").append( btn.render() );
btn.enable(false);
</script>